<template>
  <div class="dialog" v-if="configure">
    <div style="margin-top: 20px">
      <el-form label-width="100px">
        <el-form-item label-width="76px" label="资源类型:" prop="projectname">
          <el-button
            size="small"
            v-for="(item, index) in types"
            :key="index"
            v-if="!editFlag || typeIndex == index"
            @click="typeIndex = index"
            :type="typeIndex == index ? 'primary' : ''"
            plain
            >{{ item.name }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>{{ types[typeIndex].name }}</div>
      </div>
      <div v-show="typeIndex == 0" style="padding: 20px 20px; width: 100%">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="可用域:" v-if="taskName != '云服务商处理'">
            <el-select v-model="form.availableDomain" placeholder="请选择" size="mini" style="width: 200px">
              <el-option
                v-for="item in configure.available_domain"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="taskName == '云服务商处理'" label="IP" prop="specifyIp">
            <el-input style="width: 300px" placeholder="请输入IP" v-model="form.specifyIp" />
          </el-form-item>
          <el-form-item v-if="taskName == '云服务商处理'" label="序列号" prop="sn">
            <el-input style="width: 300px" placeholder="请输入序列号" v-model="form.sn" />
          </el-form-item>
          <!-- <el-form-item label="规格分类:" v-if="taskName != '云服务商处理'">
                        <div style="display: flex; padding-top: 8px">
                            <el-radio-group
                                v-model="form.cloudFlavorCode"
                                @change="cloudFlavorCodes"
                            >
                                <el-radio
                                    v-for="(item, index) in configure.codeList"
                                    :key="index"
                                    :label="item.specCode"
                                >
                                    {{ item.specName }}</el-radio
                                >
                            </el-radio-group>
                        </div>
                    </el-form-item> -->
          <el-form-item label="规格:" v-show="taskName != '云服务商处理'" prop="Specifications">
            <el-select
              v-model="form.Specifications"
              placeholder="请选择规格"
              size="mini"
              @change="ChangeSpecifications"
              style="width: 200px"
            >
              <el-option
                v-for="item in configure.SpecificationsList"
                :key="item.specName"
                :label="item.specName"
                :value="item.specName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系统盘:" v-if="taskName != '云服务商处理'">
            <div style="display: flex">
              <el-select v-model="form.osDisk.diskServerCode" placeholder="请选择" size="mini" style="width: 200px">
                <el-option
                  v-for="item in configure.storage_type"
                  :key="item.code"
                  :label="item.serviceName ? item.serviceName : item.dictLabel"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="form.osDisk.dataDiskSize"
                placeholder="请选择"
                size="mini"
                style="width: 200px; margin: 0 10px"
              >
                <el-option v-for="item in [160, 100]" :key="item" :label="item" :value="item"> </el-option> </el-select
              >GB
            </div>
          </el-form-item>
          <el-form-item label="操作系统:" v-if="taskName != '云服务商处理'" prop="osType">
            <el-select
              style="width: 200px"
              v-model="form.osType"
              @change="cascaderChange($event, 'form')"
              placeholder="请选择操作系统版本"
              size="mini"
            >
              <el-option
                v-for="item in this.configure.czxtList"
                :key="item.serviceNumber"
                :label="item.serviceName"
                :value="item.serviceNumber"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作系统版本:" v-if="taskName != '云服务商处理'" prop="osName">
            <!-- 请选择操作系统版本 -->
            <el-select
              v-model="form.osName"
              @change="ChangeCzxtVersion($event, 'form')"
              placeholder="请选择操作系统版本"
              size="mini"
              style="width: 200px"
            >
              <el-option v-for="item in this.CzxtVersion" :key="item.code" :label="item.serviceName" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据盘:" v-if="taskName != '云服务商处理'">
            <div>
              <span
                >你已选择<span style="color: #e83112">{{ form.disks.length }}</span
                >块，还可以选择<span style="color: #e83112">{{ 16 - form.disks.length }}</span
                >块</span
              >
              <div
                v-for="(item, index) in form.disks"
                :key="index"
                style="margin-top: 10px; display: flex; line-height: 28px"
              >
                <a @click="form.disks.splice(index, 1)"><i class="el-icon-remove"></i></a>
                <el-select v-model="item.diskServerCode" placeholder="请选择" size="mini" style="width: 160px">
                  <el-option v-for="it in configure.ccList" :key="it.code" :label="it.serviceName" :value="it.code">
                  </el-option>
                </el-select>
                <el-input
                  size="mini"
                  maxlength="7"
                  style="width: 150px; margin-left: 20px"
                  v-model="item.dataDiskSize"
                  @blur="inputNumber($event)"
                ></el-input
                >GB
              </div>
              <div style="margin: 10px 0; display: flex; line-height: 28px">
                <a
                  v-show="form.disks.length < 16"
                  @click="
                    form.disks.push({
                      diskServerCode: configure.ccList[0].code,
                      dataDiskSize: 500,
                    })
                  "
                >
                  <i class="el-icon-circle-plus" style="color: #3a8dfd"></i>
                </a>
                <span v-show="form.disks.length < 16">增加一块数据盘</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-show="!editFlag" label="主机别名:" prop="instanceName" v-if="taskName != '云服务商处理'">
            <el-input style="width: 200px" placeholder="请输入" v-model="form.instanceName" @input="InputUnstanceNum">
            </el-input>
          </el-form-item>
          <!-- v-if="!editFlag" -->
          <el-form-item v-if="!editFlag" label="数量(1~50):" prop="instanceNum" v-show="taskName != '云服务商处理'">
            <el-input
              style="width: 200px"
              size="mini"
              type="number"
              min="1"
              @input="InputUnstanceNum"
              max="50"
              placeholder="请输入申请的服务器数量"
              v-model="form.instanceNum"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <div v-show="typeIndex == 1" style="padding: 20px 20px; width: 100%">
        <el-form :model="ljsform" :rules="ljsrules" ref="ljsform" label-width="120px">
          <el-form-item v-if="taskName == '云服务商处理'" label="IP">
            <el-input style="width: 300px" placeholder="请输入IP" v-model="ljsform.specifyIp" />
          </el-form-item>
          <el-form-item v-if="taskName == '云服务商处理'" label="序列号">
            <el-input style="width: 300px" placeholder="请输入序列号" v-model="ljsform.sn" />
          </el-form-item>
          <el-form-item label="可用域:" v-if="taskName != '云服务商处理'">
            <el-select v-model="ljsform.availableDomain" placeholder="请选择" size="mini" style="width: 200px">
              <el-option
                v-for="item in configure.available_domain"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资源类型:" v-if="taskName != '云服务商处理'">
            <div style="display: flex; padding-top: 8px">
              <el-radio-group v-model="ljsform.cloudFlavorCode">
                <el-radio
                  style="margin-bottom: 10px"
                  v-for="(item, index) in configure.wlfwqList"
                  :key="index"
                  :label="item.code"
                  >{{ item.serviceName }}</el-radio
                >
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="规格:" prop="projectname" style="margin-top: -10px" v-if="taskName != '云服务商处理'">
            <span
              v-for="(item, index) in configure.wlfwqList"
              :key="index"
              v-if="ljsform.cloudFlavorCode == item.code"
              >{{ item.remark }}</span
            >
          </el-form-item>
          <el-form-item label="操作系统:" v-if="taskName != '云服务商处理'" prop="osName">
            <el-select
              style="width: 200px"
              v-model="ljsform.osType"
              @change="cascaderChange($event, 'ljsform')"
              placeholder="请选择操作系统版本"
              size="mini"
            >
              <el-option
                v-for="item in this.configure.czxtList"
                :key="item.serviceNumber"
                :label="item.serviceName"
                :value="item.serviceNumber"
              >
              </el-option>
            </el-select>
            <!-- 请选择操作系统版本 -->
            <el-select
              v-model="ljsform.osName"
              @change="ChangeCzxtVersion($event, 'ljsform')"
              placeholder="请选择操作系统版本"
              size="mini"
              style="width: 200px"
            >
              <el-option v-for="item in this.CzxtVersion" :key="item.code" :label="item.serviceName" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="数据盘:" v-if="false" v-show="taskName != '云服务商处理'">
            <div>
              <span
                >你已选择<span style="color: #e83112">{{ ljsform.disks.length }}</span
                >块，还可以选择<span style="color: #e83112">{{ 16 - ljsform.disks.length }}</span
                >块</span
              >
              <div
                v-for="(item, index) in ljsform.disks"
                :key="index"
                style="margin-top: 10px; display: flex; line-height: 28px"
              >
                <a @click="ljsform.disks.splice(index, 1)"><i class="el-icon-remove"></i></a>
                <el-select v-model="item.diskServerCode" placeholder="请选择" size="mini" style="width: 160px">
                  <el-option v-for="it in configure.ccList" :key="it.code" :label="it.serviceName" :value="it.code">
                  </el-option>
                </el-select>
                <el-input size="mini" style="width: 150px; margin-left: 20px" v-model="cpform.dataDiskSize"></el-input
                >GB
              </div>
              <div style="margin: 10px 0; display: flex; line-height: 28px">
                <a
                  v-show="ljsform.disks.length < 16"
                  @click="
                    ljsform.disks.push({
                      diskServerCode: configure.ccList[0].code,
                      dataDiskSize: 500,
                    })
                  "
                >
                  <i class="el-icon-circle-plus" style="color: #3a8dfd"></i>
                </a>
                <span v-show="ljsform.disks.length < 16">增加一块数据盘</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-show="!editFlag" label="主机别名:" prop="instanceName" v-if="taskName != '云服务商处理'">
            <el-input
              style="width: 200px"
              placeholder="请输入"
              @input="InputljsformUnstanceNum"
              v-model="ljsform.instanceName"
            >
            </el-input>
          </el-form-item>
          <!-- v-show="!editFlag" -->
          <el-form-item v-show="!editFlag" label="数量(1~50):" prop="instanceNum" v-if="taskName != '云服务商处理'">
            <el-input
              style="width: 200px"
              size="mini"
              type="number"
              min="1"
              max="50"
              @input="InputljsformUnstanceNum"
              placeholder="请输入申请的服务器数量"
              v-model="ljsform.instanceNum"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <div v-show="typeIndex == 2" style="padding: 20px 20px; width: 100%">
        <el-form :model="sjkform" :rules="sjkrules" ref="sjkform" label-width="100px">
          <el-form-item label="类型:">
            <el-radio-group v-model="sjkform.serverCode">
              <el-radio v-for="(item, index) in configure.sjkList" :key="index" :label="item.code"
                >{{ item.serviceName }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="版本:">
                        <el-radio-group v-model="sjkform.databaseVersion">
                            <el-radio label="SQL Server 2019"
                                >SQL Server 2019</el-radio
                            >
                            <el-radio label="SQL Server 2017"
                                >SQL Server 2017</el-radio
                            >
                            <el-radio label="SQL Server 2016"
                                >SQL Server 2016</el-radio
                            >
                            <el-radio label="SQL Server BI"
                                >SQL Server BI</el-radio
                            >
                        </el-radio-group>
                    </el-form-item> -->
          <el-form-item label="位数:">
            <el-radio-group v-model="sjkform.systemDigits">
              <el-radio label="64位">64位</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务器:" prop="hostId">
            <el-select v-model="sjkform.hostId" placeholder="请选择" size="mini" style="width: 200px">
              <el-option v-for="item in hosts" :key="item.id" :label="EchoName(item)" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div v-show="typeIndex == 3" style="padding: 20px 20px; width: 100%">
        <el-form :model="cpform" :rules="cprules" ref="cpform" label-width="100px">
          <el-form-item label="存储类型:">
            <el-radio-group v-model="cpform.productCode" @change="productCodeChange">
              <el-radio label="共享型">共享型</el-radio>
              <el-radio label="服务型">服务型</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务类型:">
            <el-radio-group v-model="cpform.diskCode">
              <el-radio :label="cpform.productCode == '共享型' ? '共享存储' : '视频云存储'"
                >{{ cpform.productCode == "共享型" ? "共享存储" : "视频云存储" }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="磁盘:">
            <div style="display: flex">
              <el-select v-model="cpform.diskServerCode" placeholder="请选择" size="mini" style="width: 200px">
                <el-option
                  v-for="item in cpform.productCode == '共享型' ? configure.ccList : configure.fwcpList"
                  :key="item.code"
                  :label="item.serviceName"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <el-input
                size="mini"
                maxlength="7"
                style="width: 150px; margin-left: 20px"
                v-model="cpform.dataDiskSize"
              ></el-input
              >GB
            </div>
          </el-form-item>
          <el-form-item label="服务器:" prop="hostIds" v-if="cpform.productCode == '共享型'">
            <el-select
              v-model="cpform.hostIds"
              multiple
              clearable
              placeholder="请选择"
              size="mini"
              style="width: 410px"
            >
              <el-option v-for="item in hosts" :key="item.id" :label="EchoName(item)" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="typeIndex == 4" style="padding: 20px 20px; width: 100%">
        <div class="wrap_title">
          <!-- <div>安全产品</div> -->
        </div>
        <div style="padding: 20px 20px">
          <div class="wrap_item" style="margin-top: 0; display: block">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
              >全选
            </el-checkbox>
            <div style="margin: 15px 0"></div>
            <el-checkbox-group v-model="aqform" @change="handleCheckedChange">
              <el-checkbox v-for="item in configure.yyaqList" :label="item.code" :key="item.code"
                >{{ item.serviceName }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { specDetail } from "@/api/resources/apply";
import { getDicts } from "@/api/system/dict/data";
import { serviceByClazz, specEcs } from "@/api/resources/apply";
import { v4 as uuidv4 } from "uuid";
export default {
  name: "AddaddBdialogsToDo",
  components: {},
  props: {
    configure: {
      type: Object,
      default: {
        available_domain: [], //可用域
        cloud_service_provider: [], //服务商
        storage_type: [], //系统盘类型
        codeList: [], //云服务器规格列表
        czxtList: [], //操作系统列表
        ccList: [], //数据盘类型
        fwcpList: [], //服务型磁盘类型
        wlfwqList: [], //高性能服务器资源类型
        sjkList: [], //数据库类型,
        SpecificationsList: [],
      },
    },
    hosts: {
      type: Array,
      default: [],
    },
    addShow: {
      type: String,
      default: 1,
    },
    taskName: {
      type: String,
      default: "",
    },
    supplierCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      SpecificationsList: [],
      CzxtVersion: [], //操作系统版本
      isIndeterminate: false,
      yyaqList: null,
      checkAll: false,
      //是否是修改
      editFlag: false,
      //资源类型
      types: [
        {
          name: "云服务器",
          code: "yzj",
        },
        {
          name: "高性能服务器",
          code: "wlfwq",
        },
        {
          name: "数据库",
          code: "sjk",
        },
        {
          name: "存储产品",
          code: "cc",
        },
        {
          name: "安全产品",
          code: "aq",
        },
      ],
      typeIndex: 0,
      //云服务器数据
      form: {
        flavorType: 1, //主机类型 1 虚拟化主机 2 高性能物理机
        availableDomain: "", //可用域
        cloudFlavorCode: "", //规格分类
        Specifications: "",
        cpuNumber: "1", //CPU核数
        memorySize: "1", //内存条容量

        osDisk: {
          diskServerCode: "",
          dataDiskSize: "",
        }, //系统盘
        osServerCode: "", //操作系统code
        osName: "", //操作系统名称
        osType: "",
        disks: [], //数据盘列表
        instanceName: "云服务器", //主机名称
        instanceNum: 1, //数量
      },
      //高性能服务器数据
      ljsform: {
        flavorType: 2, //主机类型 1 虚拟化主机 2 高性能物理机
        availableDomain: "", //可用域
        cloudFlavorCode: "", //资源类型

        osServerCode: "", //操作系统code
        osName: "", //操作系统名称
        osType: "",
        disks: [], //数据盘列表
        instanceName: "高性能服务器", //主机名称
        instanceNum: 1, //数量
      },
      //数据库数据
      sjkform: {
        serverCode: "", //数据库类型
        databaseVersion: "", //数据库版本
        systemDigits: "64位", //位数
        hostId: "", //服务器
      },
      //存储产品数据
      cpform: {
        productCode: "共享型", //存储类型
        diskCode: "共享存储", //服务类型
        diskServerCode: "", //磁盘类型
        dataDiskSize: 500, //磁盘大小
        hostIds: [], //服务器
      },
      aqform: [],
      rules: {
        specifyIp: {
          required: true,
          message: "请输入IP",
          trigger: "blur",
        },
        sn: {
          required: true,
          message: "请输入序列号",
          trigger: "blur",
        },
        instanceName: [
          {
            required: true,
            message: "请输入主机别名",
            trigger: "blur",
          },
        ],
        instanceNum: [
          {
            required: true,
            message: "请输入申请的服务器数量",
            trigger: "blur",
          },
        ],
        Specifications: [
          {
            required: true,
            message: "请选择规格",
            trigger: "change",
          },
        ],
        osName: [
          {
            required: true,
            message: "请选择系统版本",
            trigger: "change",
          },
        ],
        osType: [
          {
            required: true,
            message: "请选择操作系统",
            trigger: "change",
          },
        ],
      },

      ljsrules: {
        instanceName: [
          {
            required: true,
            message: "请输入主机别名",
            trigger: "blur",
          },
        ],
        instanceNum: [
          {
            required: true,
            message: "请输入申请的服务器数量",
            trigger: "blur",
          },
        ],
        osName: [
          {
            required: true,
            message: "请选择系统版本",
            trigger: "change",
          },
        ],
        osType: [
          {
            required: true,
            message: "请选择操作系统",
            trigger: "change",
          },
        ],
      },
      sjkrules: {
        hostId: [
          {
            required: true,
            message: "请选择服务器",
            trigger: "change",
          },
        ],
      },
      cprules: {
        hostIds: [
          {
            required: true,
            message: "请选择服务器",
            trigger: "change",
          },
        ],
      },

      radio: "1",

      radio1: "1",
      options: ["分布式存储", "1", "2", "3", "4", "5"],
      selectValue: "",

      options2: [
        {
          value: "win",
          label: "windows",
          children: [
            {
              value: "win7",
              label: "win7",
            },
            {
              value: "win10",
              label: "win10",
            },
          ],
        },
      ],
      value: "",
      shujupan: [],
      hulianwang: [],
      wangkapeizhi: [],
      duankou: [],
      checked1: false,
      checked2: false,
      checked3: false,
      demoList: [
        {
          a: "浪潮云",
          j: "云服务器",
          b: 4,
          c: 8,
          d: 8,
          e: 128,
          f: "分布式存储",
          g: `windows/win10`,
          h: ["分布式存储，4GB，数量：2", "分布式存储，8GB，数量：3"],
          i: 1,
        },
      ],
    };
  },
  created() {
    // specEcs({Inspur:this.supplierCode}).then(res=>{
    //     this.SpecificationsList = res.rows
    // })
  },
  methods: {
    inputNumber(e) {
      let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value);
      if (!boolean) {
        this.$message.warning("请输入正整数");
        e.target.value = "";
      }
    },
    InputUnstanceNum(val) {
      if (val > 50) {
        this.form.instanceNum = 50;
      } else {
        this.form.instanceNum = val;
      }
    },
    InputljsformUnstanceNum(val) {
      if (val > 50) {
        this.ljsform.instanceNum = 50;
      } else {
        this.ljsform.instanceNum = val;
      }
    },
    cloudFlavorCodes(val) {
      return;
      this.configure.codeList.some((item) => {
        if (val == item.specCode) {
          item.details.forEach((it) => {
            if (it.serviceCode == "vcpu") {
              this.form.cpuNumber = it.serviceCount;
              this.form.cpuServerCode = it.serviceCode;
            }
            if (it.serviceCode == "memory") {
              this.form.memorySize = it.serviceCount;
              this.form.memoryServerCode = it.serviceCode;
            }
          });
          return;
        }
      });
    },
    // 云服务器规格选择
    ChangeSpecifications(val) {
      this.configure.SpecificationsList.forEach((item) => {
        if (item.specName == val) {
          this.form.Specifications = item.specName;
          this.form.cpuServerCode = item.cpuCode;
          this.form.cpuNumber = item.cpuNumber;
          this.form.memorySize = item.memorySize;
          this.form.memoryServerCode = item.memoryCode;
        }
      });
      this.$forceUpdate();
    },
    handleCheckAllChange(val) {
      if (!this.yyaqList) {
        this.yyaqList = this.configure.yyaqList.map((item) => {
          return item.code;
        });
      }
      this.aqform = val ? this.yyaqList : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.configure.yyaqList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.configure.yyaqList.length;
    },
    // 回显服务器名称
    EchoName(item) {
      if (item.hostName) {
        if (item.existOnRep == true) {
          return item.hostName + "（已存在）";
        } else {
          return item.hostName;
        }
      } else {
        if (item.existOnRep == true) {
          return item.instanceName + "（已存在）";
        } else {
          return item.instanceName;
        }
      }
    },
    //提交
    submit() {
      let formName =
        this.typeIndex == 0 ? "form" : this.typeIndex == 1 ? "ljsform" : this.typeIndex == 2 ? "sjkform" : "cpform";
      if (this.typeIndex == 4) {
        this.$emit("addTable", JSON.parse(JSON.stringify(this.aqform)));
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // !this[formName].id &&
          if (this.addShow == 1 && (this.typeIndex == 0 || this.typeIndex == 1)) {
            this[formName].id = uuidv4();
          }
          if (this.typeIndex == 4) {
            this.$emit("addTable", JSON.parse(JSON.stringify(this.aqform)));
          } else {
            this.$emit("addTable", JSON.parse(JSON.stringify(this[formName])));
          }
        } else {
          return false;
        }
      });
    },
    //获取操作系统名称
    cascaderChange(data, name) {
      if (name) {
        this[name].osServerCode = "";
        this[name].osName = "";
      }
      serviceByClazz({ code: data, supplier: this.supplierCode }).then((res) => {
        this.CzxtVersion = res.data;
      });
      return;
      data.forEach((item) => {
        if (item.code == this[name].osServerCode) {
          getDicts(item.code).then((res) => {
            if (type) {
              this[name].osName = null;
            }
            this.CzxtVersion = res.data;
          });
        }
      });
      // data.some((item) => {
      //     if (item.code == this[name].osServerCode[this[name].osServerCode.length - 1]) {
      //         this[name].osName = item.serviceName;
      //         return true;
      //     } else if (item.children && item.children.length) {
      //         this.cascaderChange(item.children, name);
      //     }
      // });
    },
    // 选择指定操作系统
    ChangeCzxtVersion(val, name) {
      this.CzxtVersion.forEach((item) => {
        if (item.code == val) {
          this[name].osServerCode = item.code;
          this[name].osName = item.serviceName;
        }
      });
    },
    //存储类型变化
    productCodeChange(e) {
      if (e == "共享型") {
        this.cpform.diskServerCode = this.configure.ccList[0].code;
        this.cpform.diskCode = "共享存储";
      } else {
        this.cpform.diskServerCode = this.configure.fwcpList[0].code;
        this.cpform.diskCode = "视频云存储";
      }
    },
    //初始化
    init(data, safeProducts) {
      // this.$refs.form.resetFields();
      // this.$refs.ljsform.resetFields();
      // this.$refs.sjkform.resetFields();
      // this.$refs.cpform.resetFields();
      //云服务器数据
      (this.form = {
        flavorType: 1, //主机类型 1 虚拟化主机 2 高性能物理机
        availableDomain: "", //可用域
        cloudFlavorCode: "", //规格分类
        Specifications: "",
        cpuNumber: "1", //CPU核数
        memorySize: "1", //内存条容量

        osDisk: {
          diskServerCode: "",
          dataDiskSize: "",
        }, //系统盘

        osServerCode: "", //操作系统code
        osName: "", //操作系统名称
        osType: "",
        disks: [], //数据盘列表
        instanceName: "云服务器", //主机名称
        instanceNum: 1, //数量
      }),
        //高性能服务器数据
        (this.ljsform = {
          flavorType: 2, //主机类型 1 虚拟化主机 2 高性能物理机
          availableDomain: "", //可用域
          cloudFlavorCode: "", //资源类型

          osServerCode: "", //操作系统code
          osName: "", //操作系统名称
          osType: "",
          disks: [], //数据盘列表
          instanceName: "高性能服务器", //主机名称
          instanceNum: 1, //数量
        }),
        //数据库数据
        (this.sjkform = {
          serverCode: "", //数据库类型
          databaseVersion: "", //数据库版本
          systemDigits: "64位", //位数
          hostId: "", //服务器
        }),
        //存储产品数据
        (this.cpform = {
          productCode: "共享型", //存储类型
          diskCode: "共享存储", //服务类型
          diskServerCode: "", //磁盘类型
          dataDiskSize: 500, //磁盘大小
          hostIds: [], //服务器
        }),
        (this.editFlag = false);
      if (data) {
        this.editFlag = true;
        if (data.flavorType && data.flavorType == 1) {
          this.typeIndex = 0;
          if (!data.instanceNum) {
            data.instanceNum = 1;
          }
          this.form = data;
          this.cascaderChange(this.form.osType);
          this.configure.SpecificationsList.forEach((item) => {
            if (item.cpuNumber == this.form.cpuNumber && item.memorySize == this.form.memorySize) {
              this.form.Specifications = item.specName;
            }
          });
        } else if (data.flavorType && data.flavorType == 2) {
          this.typeIndex = 1;
          if (!data.instanceNum) {
            data.instanceNum = 1;
          }
          this.ljsform = data;
          this.cascaderChange(this.ljsform.osType);
        } else if (data.serverCode) {
          this.typeIndex = 2;
          this.sjkform = data;
        } else if (data.diskServerCode) {
          this.typeIndex = 3;
          this.cpform = data;
          if (!data.hostIds || !data.hostIds.length) {
            if (data.hosts && data.hosts.length) {
              this.cpform.hostIds = [];
              data.hosts.forEach((i) => {
                this.cpform.hostIds.push(i.id);
              });
            }
          }
        }
      } else {
        // this.typeIndex = 0;
        this.form.instanceNum = 1;
        this.form.availableDomain = this.configure.available_domain[0].dictValue;
        // this.form.cloudFlavorCode = this.configure.codeList
        //     ? this.configure.codeList[0].specCode
        //     : "";
        // 分布式存储、文件存储
        this.configure.storage_type.forEach((item) => {
          if (item.serviceName == "分布式存储") {
            this.form.osDisk = {
              diskServerCode: item.code,
              dataDiskSize: 160,
            };
          }
        });

        this.form.osType = this.configure.czxtList[0].serviceNumber; //默认选中父级操作系统
        this.ljsform.osType = this.configure.czxtList[0].serviceNumber; //默认选中父级操作系统
        // this.form.osServerCode = this.configure.czxtList[0].code;

        this.ljsform.availableDomain = this.configure.available_domain[0].dictValue;
        this.ljsform.cloudFlavorCode = this.configure.wlfwqList[0].code;
        this.ljsform.osServerCode = this.configure.czxtList[0].code;

        this.sjkform.serverCode = this.configure.sjkList[0].code;
        if (this.hosts.length) {
          this.sjkform.hostInstanceName = this.hosts[0].hostName;
        }

        this.cpform.diskServerCode = this.configure.ccList[0].code;
        // this.cloudFlavorCodes(this.form.cloudFlavorCode)
        // this.ChangeSpecifications(this.configure.SpecificationsList[0].specName)
        this.cascaderChange(this.form.osType);
        // this.cascaderChange(this.configure.czxtList, "form",true);
        // this.cascaderChange(this.configure.czxtList, "ljsform",true);
      }
      let safeProductsArrey = [];
      safeProducts.forEach((item) => {
        safeProductsArrey.push(item.productCode);
      });
      this.aqform = safeProductsArrey;
    },
  },
};
</script>
<style>
.el-form-item--medium .el-form-item__label {
  text-align: left !important;
}
</style>
<style scoped lang="less">
.dialog {
  // max-height: calc(75vh - 160px);
  padding-right: 20px;

  // overflow-y: scroll;
  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }

  i {
    line-height: 28px;
    margin-right: 10px;
    font-size: 20px;
    color: #e83112;
  }

  .wrap {
    display: flex;
    background: #faf9ff;
    margin-top: 20px;
    border-radius: 10px;

    .wrap_title {
      padding: 0 10px;
      background: #f4f4f4;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      div {
        height: 100%;
        width: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .wrap_item {
      display: flex;
      margin-top: 20px;

      div:first-child {
        width: 90px;
        font-weight: bold;
      }
    }
  }

  .msg {
    padding: 0 20px 20px 0px;
    background: #faf9ff;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-radius: 10px;

    .wra2p {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      margin-left: 20px;
      width: calc(33.33% - 20px);
      min-width: 340px;
      display: flex;
    }
  }
}
</style>
